<html>
<head>
<title>Jexcel - Javascript spreadsheet</title>
<meta name='author' content='Paul Hodel'>
<meta itemprop='keywords' name='keywords' content='Jexcel, jquery, javascript, excel-like, spreadsheet, HTML, jquery plugin, table, grid'>
<meta itemprop='description' property='og:description' name='description' content='Jexcel is a jquery and javascript plugin you can use to embedded an excel-like spreadsheet in your website and applications.'>
<meta property='og:title' content='Jexcel - Javascript spreadsheet plugin'>
<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
<meta name='format-detection' content = "telephone=yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="fNDemv4nALjUDIqXc7xPfHDEV24wtpD9xsEKLkTIYSk" />

<meta itemprop="name" content="jExcel - the JavaScript plugin to create a excel like embeddable spreadsheet">
<meta itemprop="image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
<meta itemprop="url" content="http://bossanova.uk/jexcel">
<meta property="og:type" content="website">
<meta property="og:site_name" content="jExcel">
<meta property="og:url" content="http://bossanova.uk/jexcel">
<meta property="og:locale" content="en_GB">
<meta property="og:image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="icon" href="http://bossanova.uk/templates/default/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Dosis">
<link rel="stylesheet" href="http://bossanova.uk/templates/default/css/style.css" type="text/css" />

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<script src="../dist/js/jquery.jexcel.js"></script>
<script src="../dist/js/jquery.jcalendar.js"></script>
<script src="../dist/js/excel-formula.min.js"></script>

<link rel="stylesheet" href="../dist/css/jquery.jexcel.css" type="text/css" />
<link rel="stylesheet" href="../dist/css/jquery.jcalendar.css" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

</head>
<body>

<div class='container'>

    <div class='row top'>

        <div class='column'><a href="http://bossanova.uk/jexcel"><img src="http://bossanova.uk/templates/default/img/logo-jexcel.png"></a></div>
        <div class='column'>

            <div id='menu'><div class='description' itemprop='description'></div><ul class='folder'><li><a href='http://bossanova.uk/jexcel'>jExcel website</a></li><li><a href='http://bossanova.uk/jexcel/docs'>Online Documentation</a></li><li><a href='index.html'>Examples</a></li></ul></div>

        </div>
        <div class='column'>

            <div id='search'></div>

        </div>
    </div>

    <div class='row content'>

        <div class='column' style='max-width:300px;padding:50px;padding-top:0px;' id='content_left'>

            <div id='content-left'>

                <ul>
                    <li onclick="window.open('creating-a-table-from-an-external-csv-file.html', '_top')"><a href="creating-a-table-from-an-external-csv-file.html" alt="Creating a web spreadsheet based on an external CSV">Remote data</a><br><span>Loading data from a CSV or JSON source</span></li>
                    <li onclick="window.open('currency-and-masking-numbers.html', '_top')"><a href="currency-and-masking-numbers.html" alt="Using currency column type and how to masking numbers">Masking and formating</a><br><span>How to mask or format a cell content</span></li>
                    <li onclick="window.open('including-formulas-on-your-spreadsheet.html', '_top')"><a href="including-formulas-on-your-spreadsheet.html" alt="Basic usage of formulas">Formulas</a><br><span>How to use formula in your table</span></li>
                    <li onclick="window.open('using-a-calendar-column-type.html', '_top')"><a href="using-a-calendar-column-type.html" alt="Calendar column type with date and datetime picker">Calendar picker</a><br><span>Date and datetime picker extensions</span></li>
                    <li onclick="window.open('sorting-data.html', '_top')"><a href="sorting-data.html" alt="Sorting your grid">Sorting</a><br><span>Learn the different ways to sort a table</span></li>
                    <li onclick="window.open('integrating-a-third-party-plugin-into-your-spreadsheet.html', '_top')"><a href="integrating-a-third-party-plugin-into-your-spreadsheet.html" alt="Custom column and integrating plugins on your table">Create custom cells</a><br><span>Integrate third party plugins </span></li>
                    <li onclick="window.open('working-with-dropdowns.html', '_top')"><a href="working-with-dropdowns.html" alt="Advanced dropdown column type">Advanced dropdown</a><br><span>How to use dropdown examples</span></li>
                    <li onclick="window.open('autocomplete.html', '_top')"><a href="autocomplete.html" alt="Autocomplete column">Autocomplete column</a><br><span>Native autocomplete comlumn type</span></li>
                    <li onclick="window.open('tracking-changes-on-the-spreadsheet.html', '_top')"><a href="tracking-changes-on-the-spreadsheet.html" alt="Events">Handling events</a><br><span>Integrating your table via callbacks</span></li>
                    <li onclick="window.open('readonly-options.html', '_top')"><a href="readonly-options.html" alt="Handling readonly column and cells on your spreadsheet">Readonly options</a><br><span>Working with readonly cells</span></li>
                    <li onclick="window.open('multiple-spreadsheets-in-the-same-page.html', '_top')"><a href="multiple-spreadsheets-in-the-same-page.html" alt="Create multiple instances in the same page">Multiple instances</a><br><span>Using multiple tables in the same application</span></li>
                    <li onclick="window.open('text-wrapping.html', '_top')"><a href="text-wrapping.html" alt="Wrapping compatibility">Wrapping compatibility</a><br><span>Wrapping the text in a column</span></li>
                    <li onclick="window.open('headers.html', '_top')"><a href="headers.html" alt="Nested Headers">Nested headers</a><br><span>Nested headers</span></li>
                </ul>

            </div>
        </div>
        <div class='column' style='margin-right:60px;min-width:280px;max-width:780px;text-align:justify;'>

            <div id='content'>

<div class='title'>Including formulas on your spreadsheet</div>

<p>Despite the fact you can use basic formulas or write your own methods, <b>the use of calculations is experimental</b>, and consequently you have available a very limited options in the current jExcel version.</p><br>

<div id="my"></div>


<script>
function custom(cell)
{
    alert(cell);
}

var data = [
    ['=IF(C1 < 10000, true, false)',1,10000,'=B1*C1'],
    ['Tower',2,6000,'=B2*C2'],
    ['Drum',3,5000,'=B3*C3'],
    ['Pump',4,4000,'=B4*C4'],
    ['Total','=SUM(B1:B4)','=(C1+C2+C3+C4)','=SUM(D1:D4)']
]

$('#my').jexcel({
    data:data,
    columns: [
        { type:'text' },
        { type:'numeric' },
        { type:'numeric' },
        { type:'numeric' },
    ],
    colHeaders: ['Equipment','Quantity', 'Price', 'Total'],
    colWidths: [ 400, 100, 200 ],
    colWidths: [300, 150, 150, 150, 150],
});

$('#my').jexcel('updateSettings', {
    cells: function (cell, col, row) {
        if (col > 0) {
            value = $('#my').jexcel('getValue', $(cell));
            val = numeral($(cell).text()).format('0,0.00');
            $(cell).html('<input type="hidden" value="' + value + '">' + val);
        }
    }
});
</script>


            </div>
        </div>
    </div>

</div>

</body>
</html>